<style type="text/css">
.revoke-warp {
  position: fixed;
  z-index: 99;
  display: block;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>
<template>
  <div class="container"
       v-title
       data-title='楼盘详情'>
    <div class="premises-details">
      <div class="premises-img"
           @click="toPremisesDetail(item.id)">
        <img :src="premises.url">
        <div class="premises-mask"></div>
        <div class="premises-mask-info">
          <div class="col-sm-6 name">[{{premises.area.name}}] {{premises.name}}</div>
          <div class="col-sm-6 square"><span class="premises-color"><b>{{premises.averagePrice}}&nbsp;元/平米</b></span></div>
        </div>
        <a href="javascript:;"
           class="sale">{{saleStatus}}</a>
      </div>
      <div class="premise-address">
        <div class="col-sm-6"><i class="fa fa-map-marker premises-color"> </i><span style="margin-left: 5px;">{{premises.premisesAddress}}</span></div>

      </div>
    </div>

    <div class="bor-b"
         v-isShow></div>

    <div class="line bor-b"></div>

    <ul class="item-title-half">
      <li v-show="premises.averagePrice"
          v-isShow>
        <div class="title">均价</div>
        <div class="itemText">{{premises.averagePrice}}元/㎡</div>
      </li>
      <li v-show="premises.propertyCharges"
          v-isShow>
        <div class="title">物业费用</div>
        <div class="itemText">{{premises.propertyCharges}}元/㎡/月</div>
      </li>
      <li v-show="premises.formatCheckInTime"
          v-isShow>
        <div class="title">预计入住时间</div>
        <div class="itemText">{{premises.formatCheckInTime}}</div>
      </li>
      <div v-show="showBaseMore">
        <li>
          <div class="title">地上车位数</div>
          <div class="itemText">{{premises.upCarPort}}</div>
        </li>
        <li>
          <div class="title">地下车位数</div>
          <div class="itemText">{{premises.downCarPort}}</div>
        </li>
        <li>
          <div class="title">规划户数</div>
          <div class="itemText">{{premises.houseHolds}}</div>
        </li>
        <li>
          <div class="title">物业类型</div>
          <div class="itemText">{{premises.estateTypeCN}}</div>
        </li>
        <li>
          <div class="title">建筑类别</div>
          <div class="itemText">{{premises.buildingTypeCN}}</div>
        </li>
        <li>
          <div class="title">装修状况</div>
          <div class="itemText">{{premises.decorationTypeName}}</div>
        </li>
        <li>
          <div class="title">容积率</div>
          <div class="itemText"
               v-if="premises.plotRatio">{{premises.plotRatio}}%</div>
        </li>
        <li>
          <div class="title">绿化率</div>
          <div class="itemText"
               v-if="premises.greeningRate != ''">{{premises.greeningRate}}%</div>
        </li>
        <li>
          <div class="title">物业公司</div>
          <div class="itemText">{{premises.propertyCompany}}</div>
        </li>
        <li>
          <div class="title">楼盘标签</div>
          <div class="itemText">{{premises.codeNameCN}}</div>
        </li>
        <li>
          <div class="title">物业地址</div>
          <div class="itemText">{{premises.propertyAddr}}</div>
        </li>
        <li>
          <div class="title">开发商</div>
          <div class="itemText">{{premises.buildingCompany}}</div>
        </li>
        <li>
          <div class="title">售楼部地址</div>
          <div class="itemText">{{premises.saleAddr}}</div>
        </li>
        <li>
          <div class="title">产权年限</div>
          <div class="itemText"
               v-if="premises.rightYears != ''">{{premises.rightYears}}年</div>
        </li>
      </div>
    </ul>
    <div style="text-align: center;margin-top: 5px;">
      <img src="../../assets/images/downArrow.png"
           style="width: 20px;height: 20px;"
           @click="readBaseMore"
           v-show="!showBaseMore" />
    </div>

    <div class="line bor-b"></div>
    <ul class="ul-list-view list-view-icon-right">
      <li class="ul-list-view-cell pT14 pB14">
        <a href="javascript:;">
          <div class="exhibition-title logo-pos05"><span class="title-logo"></span>可售户型</div>
        </a>
      </li>
      <li class="ul-list-view-cell pT14 pB14"
          v-for="(row, index) in someList"
          :key="index">
        <a href="javascript:;"
           class="list-navigate-right"
           v-on:click="pageFun(index)">
          <div class="col-sm-9">{{row.title}}</div>
          <div class="col-sm-3 taR f12 col-tTwo">{{row.area}}㎡</div>
        </a>
      </li>
    </ul>

    <div class="line bor-b"></div>
    <ul class="ul-list-view list-view-icon-right">
      <li class="ul-list-view-cell pT14 pB14">
        <a href="javascript:;">
          <div class="exhibition-title logo-pos05"><span class="title-logo"></span>楼盘相册</div>
        </a>
      </li>
      <li class="ul-list-view-cell pT14 pB14"
          v-for="(row, index) in premisesImageShow"
          :key="index">
        <a href="javascript:;"
           class="list-navigate-right"
           v-on:click="premisesImageClick(row.key)">
          <div class="col-sm-9">{{row.title}}</div>
        </a>
      </li>
    </ul>

    <div class="readmore"
         v-show="!moreShow"
         @click="readMore">查看更多</div>

    <div class="more-content"
         v-show="moreShow">
      <div class="line bor-b"
           v-show="premises.introduction"></div>
      <ul class="ul-list-view"
          v-show="premises.introduction">
        <li class="ul-list-view-cell pT14 pB14">
          <a href="javascript:;">
            <div class="exhibition-title logo-pos04"><span class="title-logo"></span>项目简介</div>
          </a>
        </li>
        <li class="ul-list-view-cell">
          <div class="rule-text">
            <p class="rule-textAll"
               v-html="premises.introduction"></p>
          </div>
          <div class="open-info-btn"
               v-show="flagA"
               @click="openDiv(0)">
            <a href="javascript:;"
               class="openBtn">{{flagAName}}<i class="fa fa-caret-right"></i></a>
            <span class="line-dash"></span>
          </div>
        </li>
      </ul>
      <div class="line bor-b"
           v-show="premises.selling"></div>
      <ul class="ul-list-view"
          v-show="premises.selling">
        <li class="ul-list-view-cell pT14 pB14">
          <a href="javascript:;">
            <div class="exhibition-title logo-pos04"><span class="title-logo"></span>楼盘卖点</div>
          </a>
        </li>
        <li class="ul-list-view-cell">
          <div class="rule-text">
            <p class="rule-textAll"
               v-html="premises.selling"></p>
          </div>
          <div class="open-info-btn"
               v-show="flagB"
               @click="openDiv(1)">
            <a href="javascript:;"
               class="openBtn">{{flagBName}}<i class="fa fa-caret-right"></i></a>
            <span class="line-dash"></span>
          </div>
        </li>
      </ul>
      <div class="line bor-b"
           v-isShow
           v-show="premises.discount"></div>
      <ul class="ul-list-view"
          v-isShow
          v-show="premises.discount">
        <li class="ul-list-view-cell pT14 pB14">
          <a href="javascript:;">
            <div class="exhibition-title logo-pos04"><span class="title-logo"></span>促销信息</div>
          </a>
        </li>
        <li class="ul-list-view-cell">
          <div class="rule-text">
            <p class="rule-textAll"
               v-html="premises.discount"></p>
          </div>
          <div class="open-info-btn"
               v-show="flagC"
               @click="openDiv(2)">
            <a href="javascript:;"
               class="openBtn">{{flagCName}}<i class="fa fa-caret-right"></i></a>
            <span class="line-dash"></span>
          </div>
        </li>
      </ul>
      <div class="line bor-b"
           v-show="qdltqyShowFlag&&premises.feature"></div>
      <ul class="ul-list-view"
          v-show="qdltqyShowFlag&&premises.feature">
        <li class="ul-list-view-cell pT14 pB14">
          <a href="javascript:;">
            <div class="exhibition-title logo-pos04"><span class="title-logo"></span>项目特色</div>
          </a>
        </li>
        <li class="ul-list-view-cell">
          <div class="rule-text">
            <p class="rule-textAll"
               v-html="premises.feature"></p>
          </div>
          <div class="open-info-btn"
               v-show="flagD"
               @click="openDiv(3)">
            <a href="javascript:;"
               class="openBtn">{{flagDName}}<i class="fa fa-caret-right"></i></a>
            <span class="line-dash"></span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 图片浏览 -->
    <swiper :options="swiperOption"
            class="swiper-box"
            v-show="swiperShow">
      <swiper-slide class="swiper-item"
                    v-for="(s,index) in swiperList"
                    :key="index">
        <div class="swiper-title">{{s.title}}</div>
        <div><img v-bind:src="s.url"
               :style="{height:height+'px',maxWidth:width+'px'}" /></div>
      </swiper-slide>
      <div class="prev"
           slot="button-prev"></div>
      <div class="next"
           slot="button-next"></div>
      <div class="swiper-pagination"
           slot="pagination"></div>
    </swiper>

    <div class="swiper-closed"
         v-show="swiperShow || piShow">
      <mt-button type="danger"
                 icon="back"
                 @click="swiperShow=false;piShow=false"></mt-button>
    </div>
    <!-- 图片浏览 -->

    <!-- 楼盘相册-->
    <swiper :options="swiperOption"
            class="swiper-box"
            v-show="piShow">
      <swiper-slide class="swiper-item"
                    v-for="(s,index) in premisesImagesSubList"
                    :key="index">
        <div class="swiper-title">{{index+1}}/{{premisesImagesSubList.length}}</div>
        <div><img v-bind:src="s.imageUrl"
               style="height: 300px"
               :style="{height:'300px',maxWidth:width+'px'}" /></div>
      </swiper-slide>
      <div class="prev"
           slot="button-prev"></div>
      <div class="next"
           slot="button-next"></div>
      <div class="swiper-pagination"
           slot="pagination"></div>
    </swiper>
    <!-- 楼盘相册-->

    <!--<div class="revoke-warp animated"  v-if="show" :class={bounceIn:show}>-->
    <!--<slider :pages="someList" :sliderinit="sliderinit"  v-on:revoke-layer='revokeTo'></slider>-->
    <!--</div>-->

    <!-- 分享 案场热线 推荐客户 -->
    <div class="share">
      <div class="col-sm-3 share-left">
        <button class="share-a"
                @click="shareImg=true"><i class="fa fa-share"
             aria-hidden="true"></i><br /><span>分享</span></button>
      </div>
      <div class="col-sm-9 share-button"
           style="border-left: 1px solid #ccc;">
        <button class="button"
                v-bind:disabled="!phoneCan"
                :style="{background:(phoneCan?'#07cbb1':'#bbb')}"
                style="padding: 0 10px;max-width: 180px;"
                @click="callCus(agentTelephone)"><span class="fa fa-phone"></span><span>{{phoneName}}</span></button>
      </div>
    </div>
    <!-- 分享 案场热线 推荐客户 -->
    <!--分享图片 -->
    <div class="share-img"
         v-show="shareImg"
         @click="shareImg=false"></div>
    <img class="share-img-content"
         v-show="shareImg"
         @click="shareImg=false"
         src="../../assets/images/share.png"
         width="100%">

  </div>
</template>
<script>
// import slider from './slider.vue'
import { swiper, swiperSlide } from "vue-awesome-swiper";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      flagOpenName: "展开",
      flagCloseName: "收起",
      premises: {},
      flagA: false,
      flagAName: "展开",
      flagB: false,
      flagBName: "展开",
      flagC: false,
      flagCName: "展开",
      flagD: false,
      flagDName: "展开",
      flagE: false,
      flagEName: "展开",
      flagF: false,
      flagFName: "展开",
      flagG: false,
      flagGName: "展开",
      flagH: false,
      flagHName: "展开",
      domain: window.location.href,
      qdltqyShowFlag: true,
      preDynamicList: [],
      premisesImg: "",
      houseType: "",
      someList: [],
      sliderinit: {
        currentPage: 0,
        thresholdTime: 500, //滑动时间阈值判定距离
        thresholdDistance: 100 //滑动距离阈值
      },
      show: false,
      saleStatus: "",
      swiperList: [],
      swiperOption: {
        initialSlide: 0,
        speed: 100,
        lazyLoading: true,
        pagination: ".swiper-pagination",
        loop: false,
        navigation: {
          nextEl: ".next",
          prevEl: ".prev"
        }
      },
      width: screen.width,
      height: screen.height - 120,
      swiperShow: false,
      premisesImageType: [
        { key: "3", title: "样板间" },
        { key: "4", title: "效果图" },
        { key: "5", title: "小区配套" },
        { key: "6", title: "实景图" },
        { key: "7", title: "项目现场" }
      ],
      premisesImageShow: [],
      premisesImagesSubList: [],
      piShow: false,
      moreShow: false,
      shareImg: false,
      companyUuid: "",
      shareTile: "",
      shareUrl: "",
      shareDesc: "",
      shareName: "",
      showBaseMore: false,
      phoneName: "联系渠道经理",
      phoneCan: true
    };
  },
  components: {
    // slider,
    swiper,
    swiperSlide
  },
  mounted: function() {
    var _self = this;
    _self.agentTelephone = _self.$route.params.telephone;
    _self.phoneName = _self.$route.params.phoneName;

    _self.initDomain();
    _self.initPremises();
    _self.initLoading();
    _self.wxConfig();
    // _self.getUserForOpenid();
    $(window).scrollTop(0);
  },
  methods: {
    callCus(mobile) {
      if (!this.phoneCan) {
        layer.msg("该楼盘尚未设置案场热线", { time: 2000 });
        return;
      }
      if (mobile) {
        window.location.href = "tel:" + mobile;
      } else {
        layer.msg("手机号不存在", {
          time: 2000
        });
      }
    },
    initDomain() {
      var _self = this;
      var domainIndex = _self.domain.indexOf("qdltqy");
      if (domainIndex >= 0) {
        _self.qdltqyShowFlag = false;
      }
    },
    initLoading() {
      var _self = this;
      window.setTimeout(function() {
        var numAll = document.getElementsByClassName("rule-textAll").length;
        for (var i = 0; i < numAll; i++) {
          var nowHei = document.getElementsByClassName("rule-textAll")[i]
            .offsetHeight;
          if (nowHei > 220) {
            if (i == 0) {
              _self.flagA = true;
            } else if (i == 1) {
              _self.flagB = true;
            } else if (i == 2) {
              _self.flagC = true;
            } else if (i == 3) {
              _self.flagD = true;
            } else if (i == 4) {
              _self.flagE = true;
            } else if (i == 5) {
              _self.flagF = true;
            } else if (i == 6) {
              _self.flagG = true;
            }
          }
        }
      }, 500);
    },
    openDiv(index) {
      this.customHeight(index);
    },
    initPremises() {
      var _self = this;
      var body = {};
      body.params = { id: _self.$route.params.id };
      var url = _self.utilHelper.apiUrl + "/api/getSharePremisesDetail";
      _self.$http.post(url, body).then(
        response => {
          var data = response.body.resData;
          _self.premises = data.detailResDto;
          _self.premisesImg = data.detailResDto.imgUrl;
          _self.preDynamicList = data.detailResDto.preDynamicList;
          _self.premisesImages = data.premisesImages;

          if (_self.premisesImages) {
            for (var num in _self.premisesImageType) {
              if (
                _self.premisesImages.hasOwnProperty(
                  _self.premisesImageType[num].key
                )
              ) {
                var column = {};
                column.key = _self.premisesImageType[num].key;
                column.title = _self.premisesImageType[num].title;
                _self.premisesImageShow.push(column);
              }
            }
          }
          if (data.detailResDto.saleStatus == 1) {
            _self.saleStatus = "在售";
          } else if (data.detailResDto.saleStatus == 2) {
            _self.saleStatus = "售罄";
          } else if (data.detailResDto.saleStatus == 0) {
            _self.saleStatus = "待售";
          } else {
            _self.saleStatus = "";
          }

          if (_self.premises) {
            var premises = _self.premises;
            var commission = premises.commission;
            if (commission) {
              var commissionJson = JSON.parse(commission);
              var commissionStr = "";
              for (var jsonStr in commissionJson) {
                commissionStr +=
                  commissionJson[jsonStr].name +
                  "" +
                  commissionJson[jsonStr].typeValue +
                  "" +
                  commissionJson[jsonStr].type +
                  "  ";
              }
              premises.commission = commissionStr;
            }
            //均价
            if (_self.premises.averagePrice != ",") {
              let price = _self.premises.averagePrice.split(",");
              if (price.length > 1) {
                if (price[0] && price[1]) {
                  _self.premises.averagePrice = price[0] + " 至 " + price[1];
                } else if (price[0]) {
                  _self.premises.averagePrice = price[0];
                } else if (price[1]) {
                  _self.premises.averagePrice = price[1];
                }
              }
            }
          }

          // 数组内push对象
          data.detailResDto.imgList.forEach(function(item, index) {
            if (item.url) {
              item.url.split(";").forEach(path => {
                _self.swiperList.push({
                  title: item.apartmentLayout,
                  url: path
                });
              });
            }

            let areaShow = "";
            let areaArr = item.area.split(",");
            if (areaArr.length) areaShow = areaArr[0];
            if (areaArr.length > 1 && areaArr[0] != areaArr[1]) {
              areaShow += " ~ " + areaArr[1];
            }
            item.area = areaShow;

            var objList = { background: "url(" + item.url + ") no-repeat" };
            _self.someList.push({
              style: objList,
              title: item.apartmentLayout,
              area: areaShow
            });
          });

          //设置图片样式
          _self.premises.feature = _self.setImg(_self.premises.feature);
          _self.premises.panoramicView = _self.setImg(
            _self.premises.panoramicView
          );
          _self.premises.discount = _self.setImg(_self.premises.discount);
          _self.premises.cooperationRule = _self.setImg(
            _self.premises.cooperationRule
          );
          _self.premises.introduction = _self.setImg(
            _self.premises.introduction
          );
          _self.premises.selling = _self.setImg(_self.premises.selling);
          _self.premises.customer = _self.setImg(_self.premises.customer);
          _self.premises.saleSkill = _self.setImg(_self.premises.saleSkill);

          //自定义分享内容
          _self.shareUrl = window.location.origin + window.location.pathname;
          if (window.location.search) {
            _self.shareUrl =
              _self.shareUrl + window.location.search + "#/sharePremisesDetail";
          } else {
            _self.shareUrl = _self.shareUrl + "#/sharePremisesDetail";
          }
          _self.shareUrl = _self.shareUrl + "/" + _self.$route.params.id;

          if (_self.agentTelephone) {
            _self.shareUrl = _self.shareUrl + "/" + _self.agentTelephone;
          }

          if (_self.phoneName) {
            _self.shareUrl = _self.shareUrl + "/" + _self.phoneName;
            _self.shareName = _self.phoneName;
          } else {
            if (window.localStorage.getItem("2_userName")) {
              _self.shareName = window.localStorage.getItem("2_userName") + "·";
            } else if (_self.nickname) {
              _self.shareName = _self.nickname + "·";
            }
          }
          _self.shareTitile =
            _self.shareName +
            _self.premises.name +
            "|均价" +
            _self.premises.averagePrice;

          if (_self.premises.selling) {
            _self.shareDesc = _self.premises.selling.replace(/<\/?.+?>/g, "");
          } else if (_self.premises.feature) {
            _self.shareDesc = _self.premises.feature.replace(/<\/?.+?>/g, "");
          } else {
            _self.shareDesc = _self.premises.name;
          }

          if (
            !_self.agentTelephone ||
            _self.agentTelephone == "undefined" ||
            _self.agentTelephone == "null"
          ) {
            _self.phoneCan = false;
          }
          _self.initShareContent();
        },
        response => {
          console.log(response);
        }
      );
    },
    toRecCustomer() {
      //若为游客则弹出绑定对话框
      if (this.tourist()) {
        return;
      }
      this.$router.push({
        path: "/recommendCustomer/" + this.$route.params.id
      });
    },
    revokeTo: function(msg) {
      this.show = msg;
    },
    pageFun(index) {
      this.swiperShow = true;
      this.swiperSlide.currentPage = index;
      /*if(this.someList.length >0){
                    this.show=true;
                    this.sliderinit.currentPage=index;
                }*/
    },
    toDetail(id) {
      this.$router.push({
        path: "/dynamicDetail/" + id
      });
    },
    customHeight(index) {
      var _self = this;
      var maxHeight = document.getElementsByClassName("rule-text")[index]
        .offsetHeight;
      if (maxHeight > 220) {
        document.getElementsByClassName("rule-text")[index].style.maxHeight =
          "220px";
        if (index == 0) {
          _self.flagAName = _self.flagOpenName;
        } else if (index == 1) {
          _self.flagBName = _self.flagOpenName;
        } else if (index == 2) {
          _self.flagCName = _self.flagOpenName;
        } else if (index == 3) {
          _self.flagDName = _self.flagOpenName;
        } else if (index == 4) {
          _self.flagEName = _self.flagOpenName;
        } else if (index == 5) {
          _self.flagFName = _self.flagOpenName;
        } else if (index == 6) {
          _self.flagGName = _self.flagOpenName;
        } else if (index == 7) {
          _self.flagHName = _self.flagOpenName;
        }
      } else {
        if (document.getElementsByTagName("pre")[index]) {
          document
            .getElementsByTagName("pre")
            [index].setAttribute(
              "style",
              "white-space: pre-wrap;word-break: break-word;"
            );
        }
        document.getElementsByClassName("rule-text")[index].style.maxHeight =
          document.getElementsByClassName("rule-textAll")[index].offsetHeight +
          20 +
          "px";
        if (index == 0) {
          _self.flagAName = _self.flagCloseName;
        } else if (index == 1) {
          _self.flagBName = _self.flagCloseName;
        } else if (index == 2) {
          _self.flagCName = _self.flagCloseName;
        } else if (index == 3) {
          _self.flagDName = _self.flagCloseName;
        } else if (index == 4) {
          _self.flagEName = _self.flagCloseName;
        } else if (index == 5) {
          _self.flagFName = _self.flagCloseName;
        } else if (index == 6) {
          _self.flagGName = _self.flagCloseName;
        } else if (index == 7) {
          _self.flagHName = _self.flagCloseName;
        }
      }

      //	        	if(index == 0){
      //					this.falgA = false;
      //				}else if(index == 1){
      //					this.falgB = false;
      //				}else{
      //					this.falgC = false;
      //				}
    },
    toRecommendUser() {
      //若为游客则弹出绑定对话框
      if (this.tourist()) {
        return;
      }
      var _self = this;
      var id = _self.$route.params.id;
      this.$router.push({
        path: "/myDeclare/" + id
      });
    },
    setImg(imgText) {
      if (!imgText) {
        return "";
      }
      var text = imgText.split("<img");
      if (text.length <= 1) {
        return imgText;
      }

      var tempText = "";
      text.forEach(function(item, index) {
        if (index == 0) {
          tempText += item;
        } else {
          tempText += "<img width=100%" + item;
        }
      });
      return tempText;
    },
    // 楼盘相册
    premisesImageClick(key) {
      var _self = this;
      if (_self.premisesImages) {
        _self.premisesImagesSubList = _self.premisesImages[key];
      }
      _self.piShow = true;
      this.$forceUpdate();
    },
    showImgCount(list) {
      if (list) {
        return list.length;
      } else {
        return 0;
      }
    },
    //自定义分享内容
    //注册jssdk
    wxConfig() {
      //微信配置
      var currUrl = location.href.split("#")[0];
      var body = {};
      body.params = {
        url: currUrl
      };
      var url = this.utilHelper.apiUrl + "/api/js_ticket";
      this.$http.post(url, body).then(response => {
        var data = response.body.resData;
        wx.config({
          debug: false,
          appId: data.appid, // 必填，公众号的唯一标识
          timestamp: data.time, // 必填，生成签名的时间戳
          nonceStr: data.noncestr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名，见附录1
          jsApiList: [
            "updateAppMessageShareData",
            "updateTimelineShareData",
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareQZone"
          ]
        });
        if (data.appid && data.companyUuid) {
          // this.getUserForOpenid(data.appid,data.companyUuid);
        }
      });
    },
    initShareContent() {
      var _self = this;

      //分享到qq  微信好友
      wx.ready(function() {
        //需在用户可能点击分享按钮前就先调用
        //分享好友
        wx.updateAppMessageShareData({
          title: _self.shareTitile, // 分享标题
          desc: _self.shareDesc, // 描述
          link:
            _self.shareUrl.split("#")[0] + "#" + _self.shareUrl.split("#")[1], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: _self.premises.url, // 分享图标
          success: function() {
            // 设置成功
            // alert("分享好友配置好了")
          }
        });
        //分享朋友圈，qq空间
        wx.updateTimelineShareData({
          title: _self.shareTitile, // 分享标题
          link:
            _self.shareUrl.split("#")[0] + "#" + _self.shareUrl.split("#")[1], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: _self.premises.url, // 分享图标
          success: function() {
            // 设置成功
            // alert("分享朋友圈");
          }
        });
        //旧接口 朋友圈
        wx.onMenuShareTimeline({
          title: _self.shareTitile, // 分享标题
          link:
            _self.shareUrl.split("#")[0] + "#" + _self.shareUrl.split("#")[1], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: _self.premises.url, // 分享图标
          success: function() {
            // 用户点击了分享后执行的回调函数
          }
        });
        // 旧接口 分享给好友
        wx.onMenuShareAppMessage({
          title: _self.shareTitile, // 分享标题
          desc: _self.shareDesc, // 分享描述
          link:
            _self.shareUrl.split("#")[0] + "#" + _self.shareUrl.split("#")[1], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: _self.premises.url, // 分享图标
          type: "link", // 分享类型,music、video或link，不填默认为link
          dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {}
        });
        //旧接口 分享给qq好友
        wx.onMenuShareQQ({
          title: _self.shareTitile, // 分享标题
          desc: _self.shareDesc, // 分享描述
          link:
            _self.shareUrl.split("#")[0] + "#" + _self.shareUrl.split("#")[1], // 分享链接
          imgUrl: _self.premises.url, // 分享图标
          success: function() {},
          cancel: function() {}
        });
        //旧接口 分享到QQ空间
        wx.onMenuShareQZone({
          title: "", // 分享标题
          desc: "", // 分享描述
          link: "", // 分享链接
          imgUrl: "", // 分享图标
          success: function() {},
          cancel: function() {}
        });
      });
    },

    //调用授权页面
    gotoWeiXinAuth(appId, companyUuid) {
      var state =
        companyUuid +
        "|" +
        window.location.hostname +
        "|" +
        encodeURIComponent(window.location.pathname) +
        "|sharePremisesDetail|" +
        this.$route.params.id +
        "|" +
        this.agentTelephone;

      var weixinUrl =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appId +
        "&redirect_uri=" +
        encodeURIComponent(this.utilHelper.apiUrl + "/weixin/getWeiXinAuth") +
        "&response_type=code&scope=snsapi_userinfo&state=" +
        state +
        "&connect_redirect=1#wechat_redirect";
      if (this.getClient()) {
        window.location.href = weixinUrl;
      }
    },
    //获取用户信息
    getUserForOpenid(appId, companyUuid) {
      var _self = this;
      var url =
        _self.utilHelper.apiUrl +
        "/weixin/getUserForOpenId?openid=" +
        _self.$route.params.openid;
      if (!_self.$route.params.openid) {
        _self.gotoWeiXinAuth(appId, companyUuid);
        return;
      } else if ((_self._self.$route.params.openid = "-1")) {
        return;
      }

      _self.$http.post(url, null).then(
        response => {
          var body = response.body;
          if (body.responseCode == 1) {
            _self.nickname = body.nickname;
          } else {
            _self.gotoWeiXinAuth(appId, companyUuid);
          }
        },
        response => {
          console.log(response);
        }
      );
    },

    //查看浏览器
    getClient() {
      var browser = {
        versions: (function() {
          var u = navigator.userAgent,
            app = navigator.appVersion;
          return {
            //移动终端浏览器版本信息
            trident: u.indexOf("Trident") > -1, //IE内核
            presto: u.indexOf("Presto") > -1, //opera内核
            webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
            gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或uc浏览器
            iPhone: u.indexOf("iPhone") > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf("iPad") > -1, //是否iPad
            webApp: u.indexOf("Safari") == -1 //是否web应该程序，没有头部与底部
          };
        })(),
        language: (
          navigator.browserLanguage || navigator.language
        ).toLowerCase()
      };
      if (browser.versions.mobile) {
        //判断是否是移动设备打开。browser代码在下面
        var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          //在微信中打开
          return true;
        }
        if (ua.match(/WeiBo/i) == "weibo") {
          //在新浪微博客户端打开
        }
        if (ua.match(/QQ/i) == "qq") {
          //在QQ空间打开
        }
        if (browser.versions.ios) {
          //是否在IOS浏览器打开
        }
        if (browser.versions.android) {
          //是否在安卓浏览器打开
        }
      } else {
        //否则就是PC浏览器打开
      }
    },
    //查看更多
    readMore() {
      var _self = this;
      _self.moreShow = true;
      _self.initLoading();
    },
    readBaseMore() {
      this.showBaseMore = true;
    }
  }
};
</script>
<style scoped>
.line {
  height: 10px;
  background-color: #f2f2f2;
}
.bor-b {
  border-bottom: 1px solid #ccc;
}
.item-title-half {
  background-color: #fff;
}
.item-title-half li {
  border-bottom: 1px solid #cdcdcd;
  padding: 0 10px 0 90px;
  position: relative;
  line-height: 42px;
  height: 42px;
}
.item-title-half .title {
  position: absolute;
  left: 10px;
  top: 0px;
  width: 100px;
  overflow: hidden;
}
.item-title-half .itemText {
  text-align: right;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swiper-box {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: fixed;
  top: 0;
  z-index: 60;
}
.swiper-item {
  height: 100%;
  text-align: center;
  font-size: 18px;
  background: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}
.next,
.prev {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 45px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 50px 45px;
  background-position: center;
  background-repeat: no-repeat;
}
.next {
  background-image: url("../../assets/images/next.png");
  right: 10px;
  left: auto;
}
.prev {
  background-image: url("../../assets/images/prev.png");
  left: 10px;
  right: auto;
}
.swiper-closed {
  position: fixed;
  bottom: 50px;
  left: 0px;
  right: 0px;
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  font-size: 50px;
  color: #fe5419;
  border-radius: 50%;
  line-height: 45px;
  text-align: center;
  z-index: 101;
}
.swiper-title {
  position: absolute;
  top: 10px;
  left: 0px;
  right: 0px;
  width: 250px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  color: #ffffff;
}
.rule-text {
  overflow: hidden;
  max-height: 220px;
}
.rule-textAll {
  text-indent: 0;
  padding-right: 10px;
}
.rule-textAll p img {
  width: 100%;
}
.tel-image {
  width: 30px;
  height: 30px;
}
.premises-details {
  padding: 0 5px;
  background: #fff;
}
.premises-img {
  position: relative;
  width: 100%;
  border-radius: 4px;
  height: 200px;
  overflow: hidden;
  text-align: center;
}
.premises-img img {
  width: 100%;
}
.premises-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 100%;
  background-color: #000;
  opacity: 0.4;
  z-index: 3;
}
.premises-mask-info {
  position: absolute;
  bottom: 0;
  line-height: 40px;
  color: #fff;
  z-index: 9;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
}
.premises-mask-info .name {
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.premises-mask-info .square {
  padding-right: 10px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.premise-address {
  height: 30px;
  line-height: 30px;
  color: #000;
  width: 100%;
}
.premises-color {
  color: #ff962e;
  font-weight: 400;
  font-size: 16px;
}
.premises-img .sale {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #02be9d;
  color: #fff;
  width: 44px;
  height: 20px;
  border-radius: 4px;
  text-align: center;
}
.readmore {
  width: 100%;
  text-align: center;
  color: #bbbbbb;
  margin: 15px 0;
}
.share {
  background: #fff;
  width: 100%;
  height: 45px;
  vertical-align: middle;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 9;
  border-top: 1px solid #ccc;
}
.share-button {
  color: #fff;
  margin: 8px 0;
  text-align: center;
}
.share-button span {
  margin: 0 5px;
}
.share-left {
  margin-top: 5px;
  text-align: center;
}
.share-a {
  background: #fff;
  color: #000;
  width: 40px;
  height: 40px;
  text-align: center;
  word-wrap: break-word;
}
.share-img {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: #000;
  opacity: 0.8;
}
.share-img-content {
  width: 300px;
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 1001;
}
.container {
  padding-bottom: 110px;
}
</style>